<template>
    <div class="page">
        <div class="scorll">
            <div class="content">
                <div class="card flexbet top">
                    <div class="left">
                        <p class="f20 bold">星河湾三期深基坑工程</p>
                        <p class="desc">
                            建筑深度 · -18.5米 · 2025年4月20日开工 ·
                            预计2025年10月30日完工
                        </p>
                        <div class="flexbet">
                            <div class="flexrow cent">
                                <img
                                    class="img20"
                                    src="../../../static/pit/set.png"
                                />
                                <span class="">42个监测点</span>
                            </div>
                            <div class="flexrow cent">
                                <img
                                    class="img20"
                                    src="../../../static/pit/ring.png"
                                />
                                <span>18条历史预警</span>
                            </div>
                        </div>
                    </div>
                    <ul class="flexbet right">
                        <li
                            v-for="(item, index) in topList"
                            :key="index"
                            class="flexbet"
                        >
                            <div class="flexcol">
                                <span class="f14">{{ item.name }}</span>
                                <span
                                    class="f24 bold"
                                    :class="index == 0 ? 'pink' : 'black'"
                                    >{{ item.val }}{{ item.unit }}</span
                                >
                                <span class="f12 yellow" v-if="index == 1">
                                    <i
                                        class="bold"
                                        :class="
                                            item.changeStatus == 1
                                                ? 'el-icon-top'
                                                : 'el-icon-bottom'
                                        "
                                    ></i>
                                    {{ item.changeData
                                    }}{{ item.unit }}条较上周</span
                                >
                                <span class="f12 green" v-if="index == 2"
                                    ><i class="el-icon-success"></i>较上周提升{{
                                        item.changeData
                                    }}{{ item.unit }}</span
                                >
                                <span class="f12 pink" v-if="index == 0"
                                    ><i class="el-icon-warning"></i
                                    >{{ item.changeData }}个高优先级</span
                                >
                            </div>
                            <div class="iconbox" :class="'bg' + index">
                                <img
                                    v-if="index"
                                    class="img20"
                                    :src="
                                        '../../../static/pit/top1' +
                                        index +
                                        '.png'
                                    "
                                />
                                <img
                                    v-else
                                    class="img20"
                                    src="
                                        ../../../static/pit/top2.png
                                    "
                                />
                            </div>
                        </li>
                    </ul>
                </div>

                <el-row class="mb30" :gutter="20">
                    <el-col :span="16">
                        <div class="item card searchbox">
                            <div class="title">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/filter.png"
                                    />
                                    <span class="bold">预警筛选</span>
                                </div>
                            </div>
                            <div class="flexbet">
                                <div class="flexcol">
                                    <span class="f12">预警类型</span>
                                    <el-select
                                        v-model="type"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in topOpt1"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="flexcol">
                                    <span class="f12">监测区域</span>
                                    <el-select
                                        v-model="lever"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in topOpt2"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="flexcol">
                                    <span class="f12">时间范围</span>
                                    <el-select
                                        v-model="status"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in topOpt3"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="flexbet date">
                                <div class="flexcol">
                                    <span class="f12">时间范围</span>
                                    <el-date-picker
                                        v-model="datePeriod"
                                        type="daterange"
                                        start-placeholder="年/月/日"
                                        end-placeholder="年/月/日"
                                        :default-time="['00:00:00', '23:59:59']"
                                    >
                                    </el-date-picker>
                                </div>
                                <el-button icon="el-icon-search" class="bluebtn"
                                    >查询</el-button
                                >
                            </div>
                        </div>
                        <div class="item card tablebox sw">
                            <div class="title flexbet">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/warn2.png"
                                    />
                                    <span class="bold">预警列表</span>
                                </div>
                                <ul class="swbox flexbet">
                                    <li
                                        v-for="(item, index) in btns"
                                        :key="index"
                                        class="btntag swtag"
                                        :class="
                                            index == active0 ? 'active0' : ''
                                        "
                                        @click="changeActive0(index)"
                                    >
                                        <img
                                            :src="
                                                index == active0
                                                    ? item.selectUrl
                                                    : item.url
                                            "
                                        />
                                        <span>{{ item.name }}</span>
                                    </li>
                                </ul>
                                <!-- <span class="blue f14"
                                    >查看全部 <i class="el-icon-arrow-right"></i
                                ></span> -->
                            </div>
                            <el-table
                                class="table"
                                :data="tableData"
                                style="width: 100%"
                            >
                                <el-table-column
                                    prop="id"
                                    label="预警ID"
                                    width="140"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="typeName"
                                    label="预警类型"
                                >
                                </el-table-column>
                                <el-table-column label="监测点" width="180">
                                    <template slot-scope="scope">
                                        <div class="flexrow cent">
                                            <div
                                                class="imgbox"
                                                :class="
                                                    scope.row.status == 0
                                                        ? 'bg0'
                                                        : 'bg' + scope.row.lever
                                                "
                                            >
                                                <img
                                                    class="img20"
                                                    :src="scope.row.iconUrl"
                                                />
                                            </div>
                                            <div class="flexcol">
                                                <span>{{
                                                    scope.row.name
                                                }}</span>
                                                <span class="f12">{{
                                                    scope.row.location
                                                }}</span>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="预警等级" width="100">
                                    <template slot-scope="scope">
                                        <span
                                            class="tabletag"
                                            :class="
                                                'tabletag' + scope.row.lever
                                            "
                                            effect="dark"
                                            >{{ scope.row.leverName }}</span
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="预警时间"
                                    width="160"
                                >
                                </el-table-column>
                                <el-table-column label="处理状态" width="90">
                                    <template slot-scope="scope">
                                        <span
                                            class="tabletag"
                                            :class="
                                                scope.row.status == 1
                                                    ? 'greentag'
                                                    : ''
                                            "
                                            effect="dark"
                                            >{{ scope.row.statusName }}</span
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100">
                                    <template slot-scope="scope">
                                        <span class="blue mr10">查看</span>
                                        <span
                                            :class="
                                                scope.row.status == 2
                                                    ? 'yellow'
                                                    : ''
                                            "
                                            >处理</span
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="flexbet bot">
                                <span>显示 1 到 5 条，共 18 条记录</span>
                                <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="40"
                                >
                                </el-pagination>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item card">
                            <div class="title flexrow cent">
                                <img
                                    class="img20"
                                    src="../../../static/pit/chart.png"
                                />
                                <span class="bold">预警统计</span>
                            </div>
                            <div class="flexbet">
                                <span>预警类型分布</span>
                                <span class="f12">本月</span>
                            </div>
                            <div
                                id="pointTrend"
                                style="
                                    width: 80%;
                                    height: 180px;
                                    margin: 0 auto;
                                "
                            ></div>
                            <div class="flexbet">
                                <span>预警等级分布</span>
                                <span class="f12">本月</span>
                            </div>
                            <div
                                id="leverTrend"
                                style="
                                    width: 80%;
                                    height: 180px;
                                    margin: 0 auto;
                                "
                            ></div>
                        </div>
                        <div class="item card">
                            <div class="title flexbet">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/clock2.png"
                                    />
                                    <span class="bold">最近处理记录</span>
                                </div>
                                <span class="blue f14">查看全部</span>
                            </div>
                            <ul class="msgbox">
                                <li
                                    v-for="(item, index) in msgList"
                                    :key="index"
                                >
                                    <div class="flexbet">
                                        <span class="black">{{
                                            item.title
                                        }}</span>
                                        <span class="f12 green">{{
                                            item.statusName
                                        }}</span>
                                    </div>

                                    <span class="f12">{{ item.desc }}</span>
                                    <div class="flexbet cent">
                                        <span class="f12">{{ item.time }}</span>

                                        <span
                                            class="tag"
                                            :class="'tag' + item.status"
                                            >{{
                                                item.status == 0
                                                    ? "已处理"
                                                    : "处理"
                                            }}</span
                                        >
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="item card">
                            <div class="title flexrow cent">
                                <img
                                    class="img20"
                                    src="../../../static/pit/set3.png"
                                />
                                <span class="bold">预警设置</span>
                            </div>
                            <ul class="setbox">
                                <li
                                    v-for="(item, index) in setList"
                                    :key="index"
                                    class="flexbet"
                                >
                                    <div class="flexrow cent">
                                        <img
                                            :src="item.iconUrl"
                                            class="img20 mr10"
                                        />
                                        <div class="flexcol">
                                            <span class="black">{{
                                                item.title
                                            }}</span>
                                            <span class="f12">{{
                                                item.desc
                                            }}</span>
                                        </div>
                                    </div>
                                    <el-switch
                                        v-model="setVal[index]"
                                        active-color="#165DFF"
                                        inactive-color="#E5E7EB"
                                    >
                                    </el-switch>
                                </li>
                            </ul>
                            <div class="blockbtn flexrow">
                                <img
                                    class="img20 mr10"
                                    src="../../../static/pit/set4.png"
                                /><span>详细预警阈值设置</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            color: ["#165dff", "#ff7d00", "#3dd4a7", "#86909c"],
            topList: [
                {
                    name: "今日预警",
                    val: "2",
                    unit: "",
                    changeStatus: 0,
                    changeData: 1,
                },
                {
                    name: "本周预警",
                    val: 3,
                    unit: "",
                    changeStatus: 1,
                    changeData: 3,
                },
                {
                    name: "处理率",
                    val: 94,
                    unit: "%",
                    changeStatus: 1,
                    changeData: 2,
                },
            ],
            topOpt1: [
                {
                    value: 1,
                    label: "全部类型",
                },
                {
                    value: 2,
                    label: "位移预警",
                },
                {
                    value: 3,
                    label: "应力预警",
                },
                {
                    value: 4,
                    label: "渗透预警",
                },
                {
                    value: 5,
                    label: "环境预警",
                },
                {
                    value: 6,
                    label: "设备异常",
                },
            ],
            type: 1,
            topOpt2: [
                {
                    value: 1,
                    label: "全部等级",
                },
                {
                    value: 2,
                    label: "高优先级",
                },
                {
                    value: 3,
                    label: "中优先级",
                },
                {
                    value: 4,
                    label: "低优先级",
                },
            ],
            lever: 1,
            topOpt3: [
                {
                    value: 1,
                    label: "全部状态",
                },
                {
                    value: 2,
                    label: "未处理",
                },
                {
                    value: 3,
                    label: "处理中",
                },
                {
                    value: 4,
                    label: "已处理",
                },
                {
                    value: 5,
                    label: "已关闭",
                },
            ],
            status: 1,
            datePeriod: [],
            active0: 0,
            btns: [
                {
                    name: "刷新",
                    url: "../../../static/pit/fresh.png",
                    selectUrl: "../../../static/pit/fresh1.png",
                },
                {
                    name: "导出",
                    url: "../../../static/pit/download.png",
                    selectUrl: "../../../static/pit/download1.png",
                },
            ],
            msgList: [
                {
                    status: 0,
                    statusName: "已处理",
                    title: "边坡渗流-SL04",
                    desc: "渗流速度异常，已加强监测频率",
                    time: "2025-07-15 16:45:12",
                    name: "王工",
                },
                {
                    status: 0,
                    statusName: "已处理",
                    title: "位移监测-WY09",
                    desc: "设备信号中断，已派人检修",
                    time: "2025-07-15 14:22:38",
                    name: "李工",
                },
                {
                    status: 0,
                    statusName: "已处理",
                    title: "地表沉降-DB03",
                    desc: "沉降速率加快，已调整施工方案",
                    time: "2025-07-14 08:35:19",
                    name: "张工",
                },
                {
                    status: 0,
                    statusName: "已处理",
                    title: "支撑轴力-ZC02",
                    desc: "轴力接近预警值，加强支撑",
                    time: "2025-07-13 11:20:05",
                    name: "刘工",
                },
            ],
            tableData: [
                {
                    id: "#AL20250716001",
                    location: "北侧",
                    name: "墙体应力-QT07",
                    type: 1,
                    typeName: "应力预警",
                    lever: 2, //0低 1中 2高
                    leverName: "高优先级",
                    status: 2, //0已关闭 1已处理 2未处理
                    statusName: "未处理",
                    time: "2025-07-16 10:23:45",
                    iconUrl: "../../../static/pit/table22.png",
                },
                {
                    id: "#AL20250716002",
                    location: "南侧",
                    name: "支撑轴力-ZC05",
                    type: 2,
                    typeName: "位移预警",
                    lever: 1, //0低 1中 2高
                    leverName: "中优先级",
                    status: 2, //0已关闭 1已处理 2未处理
                    statusName: "未处理",
                    time: "2025-07-16 09:15:22",
                    iconUrl: "../../../static/pit/arrow4.png",
                },
                {
                    id: "#AL20250715003",
                    location: "北侧",
                    name: "边坡渗流-SL04",
                    type: 3,
                    typeName: "渗透预警",
                    lever: 0, //0低 1中 2高
                    leverName: "低优先级",
                    status: 1, //0已关闭 1已处理 2未处理
                    statusName: "已处理",
                    time: "2025-07-15 16:45:12",
                    iconUrl: "../../../static/pit/rain.png",
                },
                {
                    id: "#AL20250715004",
                    location: "东侧",
                    name: "位移监测-WY09",
                    type: 4,
                    typeName: "设备异常",
                    lever: 0, //0低 1中 2高
                    leverName: "低优先级",
                    status: 1, //0已关闭 1已处理 2未处理
                    statusName: "已处理",
                    time: "2025-07-15 14:22:38",
                    iconUrl: "../../../static/pit/set2.png",
                },
                {
                    id: "#AL20250714005",
                    location: "西侧",
                    name: "地表沉降-DB03",
                    type: 2,
                    typeName: "位移预警",
                    lever: 1, //0低 1中 2高
                    leverName: "中优先级",
                    status: 0, //0已关闭 1已处理 2未处理
                    statusName: "已关闭",
                    time: "2025-07-14 08:35:19",
                    iconUrl: "../../../static/pit/arrow2.png",
                },
            ],
            setList: [
                {
                    title: "短信预警",
                    desc: "监测值异常时发送短信",
                    iconUrl: "../../../static/pit/ring2.png",
                },
                {
                    title: "声音报警",
                    desc: "监测值异常时发出警报声",
                    iconUrl: "../../../static/pit/lound.png",
                },
                {
                    title: "邮件预警",
                    desc: "监测值异常时发送邮件",
                    iconUrl: "../../../static/pit/email.png",
                },
            ],
            setVal: [true, true, false],
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.pointTrendFn();
        this.leverTrendFn();
    },
    methods: {
        pointTrendFn() {
            let pointTrend = this.$echarts.init(
                document.getElementById("pointTrend")
            );
            pointTrend.setOption({
                color: ["#165DFF", "#F87272", "#FFAA33", "#36D399", "#94A3B8"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "10%",
                    left: "center",
                    itemWidth: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { name: "位移预警", icon: "circle" },
                        { name: "应力预警", icon: "circle" },
                        { name: "渗流预警", icon: "circle" },
                        { name: "环境预警", icon: "circle" },
                        { name: "设备异常", icon: "circle" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["36%", "50%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "30%"],
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 6, name: "位移预警" },
                            { value: 5, name: "应力预警" },
                            { value: 3, name: "渗流预警" },
                            { value: 2, name: "环境预警" },
                            { value: 2, name: "设备异常" },
                        ],
                    },
                ],
            });
        },
        changeActive0(index) {
            this.active0 = index;
        },
        leverTrendFn() {
            let leverTrend = this.$echarts.init(
                document.getElementById("leverTrend")
            );
            leverTrend.setOption({
                color: ["#F87272", "#FFAA33", "#94A3B8"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "8%",
                    left: "center",
                    itemWidth: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { icon: "circle", name: "高优先级" },
                        { icon: "circle", name: "中优先级" },
                        { icon: "circle", name: "低优先级" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["60%"],
                        center: ["50%", "45%"],
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },

                        data: [
                            { value: 3, name: "高优先级" },
                            { value: 6, name: "中优先级" },
                            { value: 8, name: "低优先级" },
                        ],
                    },
                ],
            });
        },
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    .content {
        background: #fff;
        padding: 30px;
        font-size: 16px;
        color: #7a7b7c;
        .card {
            border-radius: 10px;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexcol {
    display: flex;
    flex-direction: column;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.cent {
    align-items: center;
}
.f14 {
    font-size: 14px;
}
.f12 {
    font-size: 12px;
}
.f16 {
    font-size: 16px;
}
.f18 {
    font-size: 18px;
}
.f20 {
    font-size: 20px;
}
.f22 {
    font-size: 22px;
}
.f24 {
    font-size: 24px;
}
.bold {
    font-weight: 800;
}
.mb30 {
    margin-bottom: 30px;
}
.mt10 {
    margin-top: 10px;
}
.mr20 {
    margin-right: 20px;
}
.mr10 {
    margin-right: 10px;
}

.pad20 {
    padding: 20px;
}
.img20 {
    width: 20px;
    height: 20px;
}
.top {
    margin-bottom: 30px;
    .left {
        font-size: 14px;
        padding: 20px;
        width: 25%;
        color: #fff;
        background: #165dff;
        border-radius: 10px 0 0 10px;
        align-items: center;
        justify-content: center;
        .desc {
            color: #cfdeff;
            margin: 15px 0px;
        }
    }
    .right {
        flex: 1;

        width: 100%;
        li {
            width: 33%;
            padding: 20px;
            border-radius: 10px;
            color: #7a7b7c;
            border-right: 1px solid #f2f6fc;

            .f18 {
                font-weight: 800;
                margin-top: 5px;
            }
            .font0 {
                color: #165dff;
            }
            .font1 {
                color: #ff7d00;
            }
            .font2,
            .font3 {
                color: #00b42a;
            }
            .bg0 {
                background: #fef1f1;
            }
            .bg1 {
                background: #fff6ea;
            }
            .bg2 {
                background: #ebfbf5;
            }
        }
    }
    .el-select {
        margin-top: 10px;
        width: 150px;
        padding-right: 10px;
    }
}
.searchbox {
    color: #000;
    .f12 {
        margin-bottom: 10px;
    }
    .date {
        margin-top: 15px;
        align-items: flex-end;
        .bluebtn {
            width: 300px;
        }
    }
}

.item {
    padding: 20px;
    margin-bottom: 30px;
    transition: transform 0.3s ease-out;
}
.item:hover {
    transform: scale(1.02);
}

item:mouseout {
    transform: scale(1);
}
.height1 {
    height: 530px;
}

.title {
    width: 100%;
    margin-bottom: 20px;
    height: 40px;
    align-items: center;
    .bold {
        color: #000;
        font-size: 20px;
    }
    .rightfont {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .img20 {
        margin-right: 10px;
    }
}
.msgbox {
    width: 100%;
    li {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        background: #f9f9fa;
        .black {
            display: inline-block;
        }
    }
}
.setbox {
    width: 100%;
    border-bottom: 1px solid #f2f6fc;
    li {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        background: #f9f9fa;
        .black {
            display: inline-block;
        }
    }
}

.btntag {
    display: inline-block;
    padding: 3px 10px;
    background: #f2f3f5;
    color: #000;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.tablebox {
    .table {
        .imgbox {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e7eeff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        .tabletag {
            border-radius: 30px;
            padding: 3px 10px;
            border: none;
            background: #f3f4f6;
            color: #6c6b6b;
        }

        .tabletag1 {
            color: #ffaf40;
            background: #fff6ea;
        }
        .tabletag2 {
            color: #f87272;
            background: #fef1f1;
        }
        .greentag {
            color: #36d399;
            background: #ebfbf5;
        }
        .bg2 {
            background: #fef1f1;
        }
        .bg1 {
            background: #fff6ea;
        }
        .bg0 {
            background: #f3f4f6;
        }
    }
    .bot {
        color: #333;
        font-size: 14px;
        margin-top: 20px;
    }
}

.redtag {
    font-size: 12px;
    color: #f87272;
    background: #fef1f1;
    border-radius: 30px;
    padding: 5px 10px;
}

.pointbox {
    ul {
        width: 100%;
        li {
            width: 48%;
            background: #f9fafb;
            padding: 10px 15px;
            border-radius: 10px;
        }
    }
    .imgbox {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        margin-top: 20px;
        img {
            width: 100%;
            height: 200px;
            border-radius: 10px;
        }
    }
}

.active0 {
    background: #2762ef !important;
    color: #fff !important;
}

.black {
    color: #000;
}
.red {
    color: #f53f3f;
}
.pink {
    color: #f87272;
}
.pinkbg {
    background: #fef1f1 !important;
}
.yellow {
    color: #ffaf40;
}
.green {
    color: #36d399;
}
.blue {
    color: #2762ef;
}
.greenbg {
    background: #36d399;
}
.yellowbg {
    background: #ff7d00;
}
.redbg {
    background: #f53f3f;
}
.circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.select {
    margin-right: 10px;
    width: 150px;
}

.warntag {
    color: #4d4204 !important;
    background: #f7f2be !important;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.topfont {
    color: #000;
    font-weight: 800;
    font-size: 30px;
}

.bluebtn {
    background: #165dff;
    color: #fff;
    font-size: 16px;
    height: 40px;
    border-radius: 10px;
}
.iconbox {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
    background: #e7eeff;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #165dff;
}
.blockbtn {
    width: 100%;
    padding: 10px;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 10px;
    color: #000;
}
.sw {
    .swbox {
        .swtag {
            display: flex;
            flex-direction: row;
            align-items: center;
            img {
                width: 15px;
                height: 15px;
                margin-right: 10px;
            }
        }
    }
    .imgbox {
        position: relative;
        width: 100%;
        height: 380px;
        .bg {
            width: 100%;
            height: 100%;
        }
        .topcover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            .iconbtn {
                background: rgba(256, 256, 256, 0.6);
                border-radius: 5px;
                font-size: 14px;
                padding: 3px 10px;
                color: #6c6b6b;
            }
        }
        .botcover {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            flex-direction: column;
            background: rgba(256, 256, 256, 0.5);
            border-radius: 5px;
            font-size: 12px;
            padding: 12px;
            line-height: 20px;
            color: #333;
        }
    }
}
</style>
